<template>
  <div class="header">
    <div class="header_content">
      <div class="logo">
        <img :src="logo" alt="logo" />
      </div>
      <div>
        <el-autocomplete
          class="search"
          v-model="valur"
          :popper-append-to-body="false"
          :fetch-suggestions="querySearch"
          :placeholder="$t('m.inputStock')"
          :trigger-on-focus="false"
          @select="handleSelect"
          clearable
          ref="elautocomplete"
        >
          <img src="@/assets/img/icon_ss.png" slot="suffix" />
          <template slot-scope="{ item }">
            <div class="name">{{ item.name }}</div>
            <span class="addr"
              >{{ item.symbol }}({{ item.market | Market }})</span
            >
          </template>
        </el-autocomplete>
      </div>
      <div class="header_right">
        <!-- 右侧设置图标 -->
        <div
          class="right_item"
          @click="dialogVisible(index)"
          v-for="(item, index) in headerBar"
          :key="index"
        >
          <el-badge :value="messageNum" v-if="index === 1 && messageNum !== 0">
            <div class="list_item">
              <img class="right_img" :src="item.img" alt="" />
              <span>{{ item.imgTitle }}</span>
            </div>
          </el-badge>
          <!-- <el-badge :value="warnNum" v-else-if="index === 0 && warnNum !== 0">
            <div class="list_item">
              <img class="right_img" :src="item.img" alt="" />
              <span>{{ item.imgTitle }}</span>
            </div>
          </el-badge> -->
          <el-tooltip
            placement="bottom"
            popper-class="tooltip"
            v-show="index === 3"
          >
            <div class="downApp">
              <img class="left_img" :src="item.img" alt="" />
              <span>{{ item.imgTitle }}</span>
            </div>
            <div slot="content">
              <dl class="appDown">
                <dd>
                  <b>
                    <img class="android" :src="androidDownload" alt />
                  </b>
                  <p>{{$t('inc.header.56hpg8w142o0')}}</p>
                </dd>
                <dd>
                  <b>
                    <img :src="iOSDownload" alt />
                  </b>
                  <p>{{$t('inc.header.56hpg8ww45o0')}}</p>
                </dd>
              </dl>
            </div>
          </el-tooltip>
          <div class="list_item" v-if="index !== 3 && (index !== 1 || messageNum == 0)">
            <img class="right_img" :src="item.img" alt="" />
            <span>{{ item.imgTitle }}</span>
          </div>
        </div>
        <!-- 退出 -->
        <div @click="logouts" class="exit">
          <img class="exit_img" src="@/assets/img/icon_zh.png" alt="" />
          <span class="exit_title">{{$t('inc.header.56hpex9hvkc0')}}</span>
        </div>
      </div>
    </div>
    <!-- 预警 -->
    <WarnDialog ref="warnDia" :show="IsVisible" @hides="hidden"> </WarnDialog>
    <!-- 消息提醒 -->
    <MessageDialog
      ref="messageDia"
      :show="IsVisible"
      @hides="hidden"
      @getReadAll="getReadAll"
    ></MessageDialog>
    <!-- 个人设置提醒 -->
    <SetDialog
      :accountInfo="accountList"
      ref="setInfo"
      :show="IsVisible"
      @hides="hidden"
    ></SetDialog>
  </div>
</template>

<script>
import {get_account_index, post_logout, get_search, post_history} from '@/assets/js/API/user.js';
import {get_details,get_more} from '@/assets/js/API/market.js';
import { get_readAll } from "@/assets/js/API/user.js";
import WarnDialog from "@/components/header/warn/WarnDialog";
import MessageDialog from "@/components/header/message/MessageDialog";
import SetDialog from "@/components/header/set/SetDialog";
export default {
  components: {
    WarnDialog,
    MessageDialog,
    SetDialog,
  },
  inject: ["reload"],
  data() {
    return {
      logo: "", // 公司LOGO
      valur: "", // 搜索内容
      searchIcon: require("@/assets/img/icon_ss.png"),
      headerBar: [
        {
          img: require("@/assets/img/icon_yj(1).png"),
          imgTitle: this.$t('inc.header.56hpex9hwnk0'),
        },
        {
          img: require("@/assets/img/icon_xx.png"),
          imgTitle: this.$t('inc.header.56hpex9hwz40'),
        },
        {
          img: require("@/assets/img/icon_sz.png"),
          imgTitle: this.$t('inc.header.56hpex9hxag0'),
        },
        // {
        //   img: require("@/assets/img/icon_kf.png"),
        //   imgTitle: "客服",
        // },
        {
          img: require("@/assets/img/icon_xzapp.png"),
          imgTitle: this.$t('inc.header.56hpex9hxjk0'),
        },
      ], // 右上角图标
      IsVisible: 99, //  0：预警，1：消息，2：设置， 3：客服， 4：下载APP， 99： 关闭全部对话框
      accountList: {}, // 个人中心
      messageNum: 0, // 消息数量
      warnNum: 2, // 预警数量
      androidDownload: "", // 安卓下载二维码
      iOSDownload: "", // IOS下载二维码
      tradeInit: {},
      timeClick: null, // 请求定时器
    };
  },
  created() {
    this.Lang = localStorage.getItem("lang");
    this.logo = localStorage.getItem("linkLogo");
    this.tradeInit = JSON.parse(localStorage.getItem("tradeInit"));
    this.androidDownload = this.tradeInit.androidDownload;
    this.iOSDownload = this.tradeInit.iOSDownload;
    this.accountInit();
  },
  mounted() {
    this.getReadAll();
    this.setval();
  },
  methods: {
    hidden(index) {
      if(index == 1) {
        this.getReadAll();
      }
      this.IsVisible = 99;
    },
    // 个人中心接口
    async accountInit() {
      const res = await get_account_index();
      // 错误退出
      if (res.code !== 1) return this.$message.error(res.data.msg);
      // 成功的回调
      this.accountList = res.data;
      this.$store.dispatch("SetNickname", res.data.nickname);
      this.$store.dispatch("SetHeadpic", res.data.avatar);
      this.$store.dispatch("SetAccount", res.data.account);
      this.$store.dispatch("SetTradePass", res.data.tradePass);
      this.$store.dispatch("SetSex", res.data.sex);
      this.$store.dispatch("SetCountryCode", res.data.countryCode);
      this.$store.dispatch("SetLevel", res.data.level);
      this.$store.dispatch("SetAssetType", res.data.assetType);
      if (res.data.isOpen == false) sessionStorage.setItem("isOpen", 0);
      else sessionStorage.setItem("isOpen", 1);
    },
    // 搜索接口
    async querySearch(queryString, cb) {
      const res = await get_search({
        //搜索接口
        keyword: queryString,
      });
      if (res.code !== 1) return this.$message.error(res.msg);
      this.$refs.elautocomplete.activated = true;
      let results = queryString
        ? res.data.list.filter(this.createFilter(queryString))
        : res.data.list;
      // console.log(results);
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant;
      };
    },
    // 选择搜索股票
    handleSelect(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      this.historyAdd(obj);
      this.$store.dispatch("SetStockData", obj);
      sessionStorage.setItem("index", 1);
      sessionStorage.setItem("SetStochChange", 1);
      this.$router.push({ path: "/quotationCenter" });
      this.getStockInfo(obj);
      this.getStockMore(obj);
      this.reload();
    },
    // 获取股票详情
    async getStockInfo(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      const res = await get_details(obj);
      if (res.code != 1) return this.$message.error(res.msg);
      this.$store.dispatch("SetStock", res.data);
    },
    // 获取股票更多信息
    async getStockMore(item) {
      const res = await get_more({
          market: item.market,
          symbol: item.symbol,
          securityType: item.securityType,
        });
      if (res.code != 1) return this.$message.error(res.msg);
      this.$store.dispatch("SetStockMore", res.data.info);
    },
    //  股票搜索历史 GET 获取 POST 插入 /api/search/history
    async historyAdd(item) {
      var obj = {
        securityType: item.securityType,
        symbol: item.symbol,
        market: item.market,
      };
      const res = await post_history(obj);
      if (res.code != 1) return this.$message.error(res.msg);
    },
    // 弹框显示： 0：预警，1：消息，2：设置， 3：客服， 4：下载APP
    dialogVisible(i) {
      // 打开点击的对话框
      if (i === 1) {
        // 获取回复消息
        this.$refs.messageDia.getMessage(2, 1);
      }else if(i == 2) {
        this.accountInit();   
      }
      this.IsVisible = i;
    },
    // 退出登录
    async logouts() {
      const confirmInfo = await this.$confirm(
        this.$t('inc.header.56hpex52xss0'),
        this.$t('inc.header.56hpex9hxss0'),
        {
          confirmButtonText: this.$i18n.t("m.determine"),
          cancelButtonText: this.$i18n.t("m.cancel"),
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmInfo !== "confirm") return this.$message.info(this.$t('inc.header.56hpex9hy640'));
      const res = await post_logout();
      if (res.code != 1) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      sessionStorage.clear();
      this.$router.push(`/login?lang=${this.Lang}`);
      setTimeout(()=> {
        window.location.reload();
      },100)
    },
    // 获取消息请求
    async getReadAll() {
      const res = await get_readAll();
      if(res.code != 1) return this.$message.error(res.msg);
      this.messageNum = res.data.unreadCount;
    },
    // 每五分钟获取一次消息请求
    setval() {
      var _this = this;
      _this.timeClick = setInterval(() => {
        _this.getReadAll();
      }, 5*60*1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timeClick); //关闭
  },
};
</script>

<style lang="less">
@import "~@/assets/less/select.less";
@import "~@/assets/less/search.less";
.header {
  height: 50px;
  width: 100%;
  background-color: @sideColor;
  border-bottom: 2px solid @DarkBorderLine;
  .header_content {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 16px;
    margin-right: 16px;
    .logo {
      flex: 1;
      img {
        height: 25px;
        width: auto;
      }
    }
    .el-autocomplete {
      width: 350px;
      height: 30px;
      margin: 0 auto;
      .el-input {
        .el-input__inner {
          background-color: @deepBg;
          border: 1px solid transparent;
          border-radius: 3px;
          height: 30px;
          color: @fff;
        }
        .el-input__suffix {
          .el-input__suffix-inner {
            i {
              height: 30px;
              line-height: 30px;
            }
            img {
              height: 22px;
              line-height: 22px;
            }
          }
        }
        input {
          color: @fff;
          border: none;
          background: none;
        }
      }
    }
    .header_right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .right_item {
        color: @fbSix;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding-left: 5px;
        position: relative;
        cursor: pointer;
        .list_item {
          display: flex;
          align-items: center;
        }
        .el-badge {
          .el-badge__content {
            height: 14px;
            line-height: 14px;
            border-radius: 3px;
            background-color: @red;
          }
        }
        .right_img {
          width: 20px;
          height: 20px;
          margin: 0 5px 0 10px;
        }
      }
      .exit {
        cursor: pointer;
        color: @fbSix;
        font-size: 14px;
        &::before {
          content: "|";
          color: @fbSix;
          margin: 0 6px 0 10px;
          height: 10px;
          width: 1px;
        }
        .exit_img {
          height: 20px;
          margin-bottom: 4px;
          margin-right: 5px;
        }
        .exit_title {
        }
      }
    }
  }
}
.el-message-box {
  background-color: @bgColor;
  border: 1px solid transparent;
  .el-message-box__header {
    .el-message-box__title {
      color: @fff;
    }
  }
  .el-message-box__content {
    color: @fff;
  }
}
.appDown {
  display: flex;
  align-items: center;
  dd {
    b {
      img {
        width: 140px;
        margin-bottom: 8px;
      }
      .android {
        margin-right: 10px;
      }
    }
    p {
      font-size: 14px;
      text-align: center;
    }
  }
}
.downApp {
  .left_img {
    // margin-bottom: 2px;
    margin: 0 5px 2px 10px;
    // line-height: 28px;
    height: 20px;
  }
}
</style>